import React, { PureComponent }from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { DatePicker, Tabs, Button, Form, Radio,Input, Modal, message } from 'antd';
import moment from 'moment';

import styles from './index.less'

const { RangePicker } = DatePicker;
const { TextArea } = Input;
const confirm = Modal.confirm;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;

class WrappedPcHoliday extends PureComponent {
  constructor(props){
    super(props);
    this.state ={
      ...props,
    }
  }
  componentWillReceiveProps(nextProps){
    this.setState({ ...nextProps });
  }
  onChange = (date, dateString) => {
    this.setState({
      holidayDate: date
    });
  };
  submitApplyDate = () => {
    const { dispatch } = this.props;
    dispatch({type: 'pc/uploadHolidayApplyInfo'});
  };
  // 发送表单数据
  handleSubmit = (e) => {
    const { onSelectDate } = this.props;
    const { holidayDate } = this.state;
    const sub = this.submitApplyDate;
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if(holidayDate){
          confirm({
            title: '确认',
            content: <ul>
                        <li>日期： {`${holidayDate[0].format('YYYY-MM-DD')} - ${holidayDate[1].format('YYYY-MM-DD')}`}</li>
                        <li>类型： {values.category}</li>
                      </ul>,
            onOk() {
              sub();
            },
            onCancel() {
              console.log('Cancel');
            },
            className:styles.modal
          });
        } else {
          message.error('请选择日期！')
        }
      }
    });
  };
  renderApplyPanel = () => {
    const { holidayDate } = this.state;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    };
    return(
      <div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            label="Date"
            { ...formItemLayout }
          >
           <span>{holidayDate ? `${holidayDate[0].format('YYYY-MM-DD')} - ${holidayDate[1].format('YYYY-MM-DD')}` : '请选择日期'}</span>
          </FormItem>
          <FormItem
            label="Num"
            { ...formItemLayout }
          >
            <span>{holidayDate ? `${moment.duration(holidayDate[1]-holidayDate[0]).as('days')}天` : '0天'}</span>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="Category"
          >
            {getFieldDecorator('category', {
              rules: [{
                required: true, message: '请选择您的假期类型！',
              }],
            })(
              <RadioGroup>
                <Radio value="事假">事假</Radio>
                <Radio value="病假">病假</Radio>
              </RadioGroup>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="Reason"
          >
            {getFieldDecorator('reason', {
              rules: [{
                required: true, message: '请选择填写您申请假期的原因！',
              }],
            })(
              <TextArea style={{ width: '80%'}}/>
            )}
          </FormItem>
          <FormItem
            wrapperCol={{ span: 12, offset: 4 }}
          >
            <Button type="primary" htmlType="submit">提交申请</Button>
          </FormItem>
        </Form>
      </div>
    )
  };
  renderListPanel = () => {
    return(
      <div>
        RenderListPanel
      </div>
    )
  };
  render() {
    return(
      <div className={styles.wrapper}>
       <div className={styles.left}>
         <RangePicker value={this.state.holidayDate} onChange={this.onChange}  open={window.innerWidth >= 768}/>
       </div>
        <div className={styles.right}>
          <Tabs tabBarStyle={{textAlign: 'center'}} defaultActiveKey="1">
            <TabPane tab='Apply' key="1">
              {this.renderApplyPanel()}
            </TabPane>
            <TabPane tab="List" key="2">
              {this.renderListPanel()}
            </TabPane>
          </Tabs>
        </div>
      </div>
    );
  }
}

function masStateToProps({ pc }){
  return { ...pc }
}
const  PcHoliday = Form.create()(WrappedPcHoliday);

export default connect(masStateToProps)(PcHoliday);
